<template>
  <div class="flex justify-between text-[#e54c5f]">
    <div class="flex items-center cursor-pointer" @click="handleGo">
      <el-icon><ArrowLeftBold /></el-icon>
      <span class="pl-5">查看详情</span>
    </div>
  </div>

  <el-card class="my-5">
    <template #header>
      <div class="card-header">
        <span>基本信息</span>
      </div>
    </template>
    <el-skeleton :rows="5" animated :loading="loading">
      <ul class="text-center text-base">
        <li class="flex justify-around my-5 text-left">
          <span class="w-48">订单号</span>
          <span class="w-1/2">{{ form.order_no }}</span>
        </li>
        <li class="flex justify-around my-5 text-left">
          <span class="w-48">金额</span>
          <span class="w-1/2">{{ form.amount }}</span>
        </li>
        <li class="flex justify-around my-5 text-left">
          <span class="w-48">充值金额</span>
          <span class="w-1/2">{{ form.recharge_amount }}</span>
        </li>
        <li class="flex justify-around my-5 text-left">
          <span class="w-48">退款状态</span>
          <span class="w-1/2">{{
            form.refund_status === 0
              ? "退款中"
              : form.refund_status === 1
              ? "退款成功"
              : "退款失败"
          }}</span>
        </li>
       
        <li class="flex justify-around my-5 text-left">
          <span class="w-48">申请时间</span>
          <span class="w-1/2">{{ formatDates(form.create_time) }}</span>
        </li>
        <li class="flex justify-around my-5 text-left">
          <span class="w-48">完成时间</span>
          <span class="w-1/2">{{ formatDates(form.finish_time) }}</span>
        </li>
      </ul>
    </el-skeleton>
  </el-card>
  <el-card class="my-5">
    <template #header>
      <div class="card-header">
        <span>审核信息</span>
      </div>
    </template>
    <el-skeleton :rows="5" animated :loading="loading">
      <ul class="text-center text-base">
        <li class="flex justify-around my-5 text-left">
          <span class="w-48">审核状态</span>
          <span class="w-1/2">
            {{
              form.review_status === 0
                ? "审核中"
                : form.review_status === 1
                ? "成功"
                : "失败"
            }}</span
          >
        </li>
      </ul>
    </el-skeleton>
  </el-card>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { refundInfoApi } from "@/api/account/index";

import { formatDates } from "@/utils/utils";
const loading = ref(false);

const router = useRouter();
const form = reactive({});
const { ...route } = useRoute();

onMounted(() => {
  if (route.query.order_no) {
    getData(route.query.order_no);
  }
});
const getData = async (order_no) => {
  loading.value = true;
  try {
    const res = await refundInfoApi({ order_no: order_no });
    Object.assign(form, res);
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

const handleGo = () => {
  router.replace(`/account/refund`);
};
</script>
